<template>
  <div>
    <div
      class="flex justify-between items-center mb-5 pb-3 border-b border-gray-200"
    >
      <h3 class="text-lg font-semibold text-gray-800">场控管理</h3>
      <div class="flex gap-2">
        <el-button type="success" size="small">开台</el-button>
        <el-button type="warning" size="small">换桌</el-button>
        <el-button type="danger" size="small">结算</el-button>
      </div>
    </div>

    <div
      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-5"
    >
      <TableCard
        v-for="table in tables"
        :key="table.id"
        :table="table"
        :show-controls="true"
        @click="handleControlClick"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TableCard from "./TableCard.vue";

// 桌台数据 (可以从父组件传入或通过API获取)
const tables = ref([
  {
    id: 1,
    number: "1号桌",
    status: "idle",
    statusText: "空闲",
    playerCount: 0,
    startTime: "",
    amount: 0
  },
  {
    id: 2,
    number: "2号桌",
    status: "busy",
    statusText: "使用中",
    playerCount: 4,
    startTime: "14:30",
    amount: 320
  },
  {
    id: 3,
    number: "3号桌",
    status: "idle",
    statusText: "空闲",
    playerCount: 0,
    startTime: "",
    amount: 0
  },
  {
    id: 4,
    number: "4号桌",
    status: "maintenance",
    statusText: "维护中",
    playerCount: 0,
    startTime: "",
    amount: 0
  },
  {
    id: 5,
    number: "5号桌",
    status: "busy",
    statusText: "使用中",
    playerCount: 2,
    startTime: "15:45",
    amount: 180
  },
  {
    id: 6,
    number: "6号桌",
    status: "idle",
    statusText: "空闲",
    playerCount: 0,
    startTime: "",
    amount: 0
  }
]);

const handleControlClick = (table: any) => {
  console.log("场控 - 操作桌台:", table);
};
</script>
